import { html } from 'nvagir'
import './TodoModal.less'

/**
 * Todo modal props for different types of modals
 */
type TodoModalProps = {
  header: string
  onClose: VoidFunction
  onConfirm: (formData: Todo) => void
  todo?: Todo
}

/**
 * Make different modals based on different props.
 * @param TodoModalProps An object for todo modal props
 * @returns el - An object that contains the outermost element(container).
 */
export const TodoModal = ({
  header,
  onClose,
  onConfirm,
  todo = { title: '', desc: '', completed: false },
}: TodoModalProps) => {
  /**
   * When click the cancel or close button, close the modal
   */
  const handleClose = () => {
    el.dom.remove()
    onClose()
  }

  /**
   * When click the confirm button, get the form data and pass to onConfirm
   */
  const handleConfirm = () => {
    el.dom.remove()
    const formData = new FormData(doms.form)
    onConfirm({
      title: formData.get('todo-title') as string,
      desc: formData.get('todo-description') as string,
      // @ts-ignore
      completed: formData.get('todo-completed'),
    })
  }

  /**
   * el - An object that contains the outermost element(container).
   * doms - An object that contains some captured elements for control.
   *   e.g. Get data from these captured elements
   */
  const { el, doms } = html<{ form: HTMLFormElement }>`
    <div class="addtodo-modal-wrap">
      <div class="addtodo-modal-content">
        <button
          n@click=${handleClose}
          class="addtodo-modal-close"
          type="button"
          aria-label="close"
        >
          <span class="addtodo-modal-close-icon">&#xe620;</span>
        </button>
        <div class="addtodo-modal-header">
          <div class="addtodo-modal-title">${header}</div>
        </div>
        <form n@name="form" n@submit=${handleConfirm}>
          <div class="addtodo-modal-body">
            <div class="form-group">
              <label>
                <span>标题</span>
                <input
                  type="text"
                  class="form-input"
                  name="todo-title"
                  value="${todo.title}"
                  placeholder="请输入待办标题"
                  required
                />
              </label>
            </div>
            <div class="form-group form-textarea-wrap">
              <label>
                <span>内容</span>
                <textarea
                  class="form-input form-textarea"
                  name="todo-description"
                  placeholder="请输入待办内容"
                  row="5"
                  cols="10"
                  required
                >
${todo.desc}</textarea
                >
              </label>
            </div>
            <div class="form-group">
              <label class="addtodo-checkbox-wrap">
                <input
                  type="checkbox"
                  class="todo-checkbox"
                  name="todo-completed"
                  ${todo.completed ? 'checked' : ''}
                />
                <span>是否完成</span>
              </label>
            </div>
          </div>
          <div class="addtodo-modal-footer">
            <button
              n@click=${handleClose}
              class="addtodo-btn addtodo-btn-cancel"
              type="button"
            >
              <span>取 消</span>
            </button>
            <button class="addtodo-btn addtodo-btn-confirm" type="submit">
              <span>确 定</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  `

  document.body.append(el.dom)
  return el
}

export const addTodoModal = (
  todoModalProps: Omit<TodoModalProps, 'header' | 'todo'>,
) => {
  TodoModal({
    header: '添加待办',
    ...todoModalProps,
  })
}

export const editTodoModal = (
  todoModalProps: Required<Omit<TodoModalProps, 'header'>>,
) => {
  TodoModal({
    header: '编辑代办',
    ...todoModalProps,
  })
}

export default {
  TodoModal,
  addTodoModal,
  editTodoModal,
}
